<template>
  <div>
    <el-card class="container">
      <div slot="header" class="clearfix">
        <span>新生录取信息统计</span>

      </div>
      <div class="block">

        <el-date-picker v-model="newborn" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" :value-format="valueFormat">
        </el-date-picker>
      </div>
      <el-button type="primary" size="default" @click="newbornQuery">查询</el-button>

      <div class="chart" ref="newBornRef"></div>
    </el-card>
    <el-card class="container">
      <div slot="header" class="clearfix">
        <span>学籍信息统计</span>

      </div>
      <div class="block">

        <el-date-picker v-model="newborn" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" :value-format="valueFormat">
        </el-date-picker>
      </div>
      <el-button type="primary" size="default">查询</el-button>

      <div class="chart" ref="studentStatusSource"></div>
    </el-card>
    <el-card class="container">
      <div slot="header" class="clearfix">
        <span>毕业就业信息统计</span>

      </div>
      <div class="block">

        <el-date-picker v-model="newborn" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" :value-format="valueFormat">
        </el-date-picker>
      </div>
      <el-button type="primary" size="default">查询</el-button>

      <div class="chart" ref="grudutionnSource"></div>
    </el-card>
    <el-card class="container">
      <div slot="header" class="clearfix">
        <span>教室培训信息统计</span>

      </div>
      <div class="block">

        <el-date-picker v-model="newborn" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" :value-format="valueFormat">
        </el-date-picker>
      </div>
      <el-button type="primary" size="default">查询</el-button>

      <div class="chart" ref="teacherInfoSource"></div>
    </el-card>

  </div>
</template>

<script>
import axios from "axios";
var echarts = require("echarts");
let newBornChart = "",
  studentSourceChart = "",
  grudutionnChart = "",
  teacherChart = "";
// let currentDate = new Date();
// 起止日期为当前日期的前一个月,需要通过当前时间计算出起止时间的时间戳,再将时间戳转为时间
// let startDate = currentDate.setTime(
//   currentDate.getTime() - 3600 * 1000 * 24 * 30
// );
export default {
  data() {
    return {
      getSetOption: {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["已提交", "已打回"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "已提交",
            type: "line",
            stack: "总人数",
            data: [],
          },
          {
            name: "已打回",
            type: "line",
            stack: "总人数",
            data: [],
          },
        ],
      },
      teacherInfoSetOption: {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["已提交", "已打回"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "已提交",
            type: "line",
            stack: "总人数",
            data: [],
          },
          {
            name: "已打回",
            type: "line",
            stack: "总人数",
            data: [],
          },
        ],
      },
      // 将时间戳转为时间放入数组里
      // newbornDate: [
      //   this.timestampToTime(startDate),
      //   this.LocalTime(new Date()),
      // ],
      // newbornForm: {
      //   startDate: this.timestampToTime(startDate),
      //   endDate: this.LocalTime(new Date()),
      // },
      newborn: ["2020-09-01", "2020-10-01"],
      valueFormat: "yyyy-MM-dd",
    };
  },
  created() {},
  mounted() {
    // axios.get("/api/get/newborn").then((res) => {
    //   console.log(res.data.list);
    // });
    this.initnewBornData();
  },
  methods: {
    initnewBornData() {
      newBornChart = echarts.init(this.$refs.newBornRef);

      newBornChart.setOption(this.getSetOption);
      this.newbornQuery();
      //  学籍统计
      let studentStatusOption = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["未提交", "已提交", "已打回"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "未提交",
            type: "line",
            stack: "总人数",
            data: [],
          },
          {
            name: "已提交",
            type: "line",
            stack: "总人数",
            data: [],
          },
          {
            name: "已打回",
            type: "line",
            stack: "总人数",
            data: [],
          },
        ],
      };
      let studentStatusRef = this.$refs.studentStatusSource;
      studentSourceChart = echarts.init(studentStatusRef);
      studentSourceChart.setOption(studentStatusOption);
      this.studentStatusQuery();
      let gradutionOption = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["未提交", "已提交", "已打回"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "未提交",
            type: "line",
            stack: "总人数",
            data: [],
          },
          {
            name: "已提交",
            type: "line",
            stack: "总人数",
            data: [],
          },
          {
            name: "已打回",
            type: "line",
            stack: "总人数",
            data: [],
          },
        ],
      };
      let grudutionnRef = this.$refs.grudutionnSource;
      grudutionnChart = echarts.init(grudutionnRef);
      grudutionnChart.setOption(gradutionOption);
      this.grudutionQuery();
      //  教师培训
      let teacherInforRef = this.$refs.teacherInfoSource;
      teacherChart = echarts.init(teacherInforRef);
      teacherChart.setOption(this.teacherInfoSetOption);
      this.teacherInfoQuery();
    },

    newbornQuery() {
    
      // this.$http
      //   .get("/newborn/gather/indexStatistics", {
      //     params: {
      //       startDate: '2021-07-14',
      //       endDate: '2021-08-13',
      //     },
      //   })
      //   .then((res) => {
      //     console.log(res);
      //     var data = res.data.data;
      //     for (var i = 0; i < data.length; i++) {
      //       xAxis.push(data[i].createDate);
      //       submitted.push(data[i].submitted);
      //       calledBack.push(data[i].calledBack);
      //     }
      //     newBornChart.setOption({
      //       xAxis: {
      //         data: xAxis,
      //       },
      //       series: [
      //         {
      //           data: submitted,
      //         },
      //         {
      //           data: calledBack,
      //         },
      //       ],
      //     });
      //   });
      let xAxis = [],
        submitted = [],
        calledBack = [];
      axios.get("/api/get/newborn").then((res) => {
        var data = res.data.list;
        for (var i = 0; i < data.length; i++) {
          xAxis.push(data[i].createDate);
          submitted.push(data[i].submitted);
          calledBack.push(data[i].calledBack);
        }
        // console.log(xAxis,submitted,calledBack);
        // console.log(newBornChart);
        newBornChart.setOption({
          xAxis: {
            data: xAxis,
          },
          series: [
            {
              data: submitted,
            },
            {
              data: calledBack,
            },
          ],
        });
      });
      // console.log(this.getSetOption);
    },
    studentStatusQuery() {
      let xAxis = [],
        submitted = [],
        calledBack = [];
      axios.get("/api/get/studentstatus").then((res) => {
        var data = res.data.list;
        for (var i = 0; i < data.length; i++) {
          xAxis.push(data[i].createDate);
          submitted.push(data[i].submitted);
          calledBack.push(data[i].calledBack);
        }
        // console.log(xAxis,submitted,calledBack);
        // console.log(newBornChart);
        studentSourceChart.setOption({
          xAxis: {
            data: xAxis,
          },
          series: [
            {
              data: submitted,
            },
            {
              data: calledBack,
            },
          ],
        });
      });
    },
    grudutionQuery() {
      let xAxis = [],
        submitted = [],
        calledBack = [];
      axios.get("/api/get/grudution").then((res) => {
        var data = res.data.list;
        for (var i = 0; i < data.length; i++) {
          xAxis.push(data[i].createDate);
          submitted.push(data[i].submitted);
          calledBack.push(data[i].calledBack);
        }
        // console.log(xAxis,submitted,calledBack);
        // console.log(newBornChart);
        grudutionnChart.setOption({
          xAxis: {
            data: xAxis,
          },
          series: [
            {
              data: submitted,
            },
            {
              data: calledBack,
            },
          ],
        });
      });
    },
    teacherInfoQuery() {
      let xAxis = [],
        submitted = [],
        calledBack = [];
      axios.get("/api/get/teacher").then((res) => {
        var data = res.data.list;
        for (var i = 0; i < data.length; i++) {
          xAxis.push(data[i].createDate);
          submitted.push(data[i].submitted);
          calledBack.push(data[i].calledBack);
        }
        // console.log(xAxis,submitted,calledBack);
        // console.log(newBornChart);
        teacherChart.setOption({
          xAxis: {
            data: xAxis,
          },
          series: [
            {
              data: submitted,
            },
            {
              data: calledBack,
            },
          ],
        });
      });
    },

    // 将时间戳转为时间
    // timestampToTime(timestamp) {
    //   let date = new Date(timestamp);
    //   let Y = date.getFullYear() + "-";
    //   // 此处月份要加一是因为月份存在数组里,从0开始,所以下标要加1
    //   let M =
    //     (date.getMonth() + 1 < 10
    //       ? "0" + (date.getMouth() + 1)
    //       : date.getMouth() + 1) + "-";
    //   let D = date.getDate();

    //   return Y + M + D;
    // },
    // LocalTime(date) {
    //   var y = date.getFullYear();
    //   var m = date.getMonth() + 1;
    //   m = m < 10 ? "0" + m : m;
    //   var d = date.getDate();
    //   d = d < 10 ? "0" + d : d;
    //   return y + "-" + m + "-" + d;
    // },
  },
};
</script>
<style lang='scss' scoped>
.container {
  display: inline-block;
  width: 450px;
  margin: 0 10px;
  .block {
    margin-bottom: 10px;
  }

  .chart {
    width: 400px;
    height: 400px;
  }
}
</style>